<template>
  <div class="design-left" :style="{ height: height }">
    <div
      :class="[
        'design-left-part',
        'thumb',
        item.category_id === pickUp ? `sel` : `nosel`,
      ]"
      :tilte="item.valueText"
      v-for="(item, key) in designDataRef"
      @click="() => pickResult(item)"
    >
      <Popper
        :content="item.valueText"
        hover
        arrow
        placement="right"
        class="dark"
        style="width: 100%"
      >
        <div class="popper-div">
          <div class="title">
            <div class="required">
              <img
                :src="publicUrl(`/images/required.png`)"
                v-show="item.required"
              />
            </div>
            <span class="text left-text">{{ item.title }}</span>
          </div>
          <div class="text overOne right-val">{{ item.valueText }}</div>
        </div>
      </Popper>
    </div>
  </div>
  <Confirm
    title="该选项影响会其他选项"
    v-model:show="showConfirm"
    @confirm="confirm"
  />
</template>
<script setup lang="ts" name="">
import { publicUrl } from "@/utils/util";
import { ref,nextTick } from "vue";
import { DesignData, DesignItem } from "../../interface";
import Confirm from "@/components/Confirm/index.vue";
import Popper from "vue3-popper";
interface DesignShow extends DesignData {
  valueText?: string;
}
interface Props {
  designData: { [key: number]: DesignShow };
  height?: string;
}

const valueText = (item: DesignData): string => {
  switch (item.type) {
    case undefined:
    case "normal": //正常单选
      return item.select &&
        item.value &&
        (typeof item.value === "number" || typeof item.value === "string")
        ? item.select[item.value].title
        : ``;
    case "upload": //上传图片
      return item.value ? (item.value as File).name : ``;
    case "text": //文本形式
      return item.value as string;
    default:
      return "";
  }
};



const { designData } = withDefaults(defineProps<Props>(), {
  designData: () => [],
  height: `2.1615rem`,
});


const pickResult = (item: DesignData,init:boolean = false) => {
  if (pickUp.value === item.category_id && init === false ) return;

  pickUp.value = item.category_id;

  switch (item.type) {
    case undefined:
    case "normal": //下拉选项
      emits(
        "pickResult",
        item.select ? item.select : [],
        item.value as number | undefined
      );
      break;
    case "upload":
      emits("pickResultUpload", item.value as File | undefined); // 上传图片
      break;
    case "text":
      emits("pickResultText", item.value as string | undefined); // 文字
      break;
  }
};

const keys = Object.keys(designData);

const pickUp = ref<number>(Number(keys[0] ? keys[0] : 0));
  const initData = (data: {
  [key: number]: DesignShow;
}): { [key: number]: DesignShow } => {
  for (let key in data){
    data[key].valueText = valueText(data[key]);
    if(Number(key) === pickUp.value){
      nextTick(()=>{ pickResult(data[pickUp.value],true);    })
    }  
  } 
  return data;
};



const designDataRef = ref<{ [key: number]: DesignShow }>(initData(designData));

const emits = defineEmits<{
  (
    event: "pickResult",
    item: { [key: number]: DesignItem },
    value: number | undefined
  ): void;
  (event: "pickResultUpload", value: File | undefined): void;
  (event: "pickResultText", value: string | undefined): void;
}>();



const showConfirm = ref<boolean>(false);

var stayValues:
  | {
      pickUpValue: number;
      value: number;
    }
  | undefined = undefined; //确认框弹出前的款式id

const confirm = () => {
  if (stayValues !== undefined) {
    designDataRef.value[stayValues.pickUpValue].value = stayValues.value;
   
  }
};

const setValue = (value: number | File | string | undefined) => {
  designDataRef.value[pickUp.value].value = value;
  designDataRef.value[pickUp.value].valueText = valueText(
    designDataRef.value[pickUp.value]
  );
  nextStyle();  //选完去往下一步
};

const getData = (): { [key: number]: DesignData } => {
  return designDataRef.value;
};

const nextStyle = () => {
  for (let i = 0; i < keys.length; i++) {
    if (Number(keys[i]) === pickUp.value && i !== keys.length - 1) {
      pickResult(designDataRef.value[Number(keys[i + 1])]);
      break;
    }
  }
};

// const

defineExpose({ setValue, getData });
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
